<template>
    <div>
        <h1>绗缝信息录入</h1>
        <div class="biaodan" >
        <el-form
        :model="ruleForm"
        :inline="true"
        class="demo-form-inline"
        >
            <el-form-item label="绗缝组" prop="group" label-width="150px">
              <el-select v-model="ruleForm.group" placeholder="请选择组" @change="changeValue($event)">
                <el-option label="1组" value="1" />
                <el-option label="2组" value="2" />
                <el-option label="3组" value="3" />
                <el-option label="4组" value="4" />
                <el-option label="5组" value="5" />
                <el-option label="6组" value="6" />
                <el-option label="7组" value="7" />
              </el-select>
            </el-form-item>
            <el-form-item label="机器设备号" prop="mach" label-width="150px">
              <!-- <el-input v-model="ruleForm.mach" /> -->
              <el-select v-model="ruleForm.mach" placeholder="请选择组" @change="changeMach($event)">
                <el-option v-for="item in deduplicatedData" :key="item.mach" :label="item.mach" :value="item.mach" />
              </el-select>
            </el-form-item>

            <el-form-item label="物料名称" prop="name" label-width="150px">
              <el-select v-model="ruleForm.name" placeholder="请选择组" @change="changeName($event)">
                <el-option v-for="item in cailiaoList" :key="item.name" :label="item.name" :value="item.name" />
              </el-select>
              <!-- <el-input v-model="ruleForm.name" /> -->
            </el-form-item>

            <el-form-item label="物料编码" prop="chanpingId" label-width="150px">
              <el-input v-model="ruleForm.chanpingId" />
            </el-form-item>

            <el-form-item label="员工姓名" prop="ygname" label-width="150px">
                <el-select v-model="ruleForm.ygname" placeholder="请选择员工" @change="changeMach($event)">
                <el-option  label="张三" value="张三" />
                <el-option  label="李四" value="李四" />
                <el-option  label="王五" value="王五" />
              </el-select>
            </el-form-item>
            <el-form-item label="生产数量" prop="ygname" label-width="150px">
              <el-input v-model="ruleForm.ygcount" />
            </el-form-item>

            
            <el-form-item>
               <!-- <el-button type="primary" @click="onSubmit">Query</el-button> -->
               <el-button type="primary" @click="queding">确定</el-button>
            </el-form-item>
            
        </el-form>
        <div style="text-align: center;"></div>

        <!-- <el-cascader :options="options" :show-all-levels="false" /> -->


    </div>
    <div class="biaoge">
      <el-table :data="tableData" style="width: 90%">
           <el-table-column sortable fixed prop="chanpingId" label="产品编码" width="150" />
           <el-table-column sortable prop="name" label="产品名" width="300" />
           <el-table-column sortable prop="CtTime" label="CT时间" width="120" />
           <el-table-column sortable prop="group" label="组" width="120" />
           <el-table-column sortable prop="mach" label="机器设备" width="120" />
           <el-table-column sortable prop="ygname" label="员工名字" width="120" />
           <el-table-column sortable prop="ygcount" label="生产片数" width="120" />
           <!-- <el-table-column sortable prop="product" label="生产时间" width="150" >
            <template #default="scope">
               <el-input-number 
                 v-model="scope.row.quantity"
                 @change="handleChange(scope.row)" 
                 size="small"
                 :min="0" :max="10"
                 :step="0.5"
               ></el-input-number>
             </template>
          </el-table-column>
           <el-table-column prop="count" label="生产片数" width="120" /> -->      
<!--        
           <el-table-column fixed="right" label="Operations" width="120">
             <template #default>
               <el-button link type="primary" size="small" @click="handleClick">
                 Detail
               </el-button>
               <el-button link type="primary" size="small">Edit</el-button>
             </template>
           </el-table-column> -->
      </el-table>
      <el-button @click="getExcel">生成excel</el-button>
      <!-- <el-button @click="qAddjihua">提交生产计划</el-button> -->
    </div>
    </div>

</template>

<script setup>
import { reactive, ref } from 'vue'
//获取机器设备
import {getjiqi,getMach} from "../api/jiqi.js"
// 导入excel模块
import { exportToExcel } from '../excel/index.js';

const ruleForm = ref({
    group:'',
    name:'',
    mach:"",
})

//生成excel
const getExcel = ()=>{
  exportToExcel(tableData.value)
  // console.log(tableData.value)
}

// const jiqiarr = {
//     1:[47,48,49,50,51,52,53,54],
//     2:[1,2,3,4,5,6,7,8],
//     3:[9,10,11]
//     // 4:[]
// }

// 存储机器的数组
  const deduplicatedData = ref([]);

//机器包含的材料
const cailiaoList = ref([])

const tableData = ref([])


const changeValue = (id)=>{
    console.log('改变了',id)
    const data = {group:id}
    deduplicatedData.value = []
    getjiqi(data).then(res=>{
        console.log(res)

        // 使用 Set 数据结构来存储已经出现过的 mach 值
        const seenMachs = new Set();

        
        // 遍历数据
        res.data.forEach(item => {
            // 如果当前 mach 值没有出现过，则将该数据添加到结果数组中，并将该 mach 值添加到已出现过的集合中
            if (!seenMachs.has(item.mach)) {
                deduplicatedData.value.push(item);
                seenMachs.add(item.mach);
            }
        });

        console.log(deduplicatedData)

    })

}

const changeMach = (id)=>{
    console.log(id)
    const data = {mach:id}
    getMach(data).then(res=>{
        console.log(res)
        cailiaoList.value = res.data
    })
}

const changeName = (id)=>{
    console.log(id)
    // ruleForm.chanpingId = cailiaoList.value.find(item => item.name === id);
    const targetObject = cailiaoList.value.find(item => item.name === id);
    ruleForm.value.chanpingId = targetObject.chanpingId
    ruleForm.value.CtTime = targetObject.CtTime
    console.log(ruleForm.value.chanpingId)
}

const queding = ()=>{
    console.log(ruleForm.value)
    tableData.value.push(ruleForm.value)
}







</script>

<style lang="scss" scoped>
.biaodan{
    margin: 20px auto;
    width: 100%;
    border-bottom: 1px solid #eeeeee;
}

.demo-form-inline .el-input {
  --el-input-width: 150px;
}

.demo-form-inline .el-select {
  --el-select-width: 150px;
}
</style>


